{include file="/sum/common/script" /}
<style>
    .store-store-form .sa-template-wrap {
        width: 100%;
        max-width: unset;
    }

    .store-store-form .sa-template-wrap .item {
        align-items: flex-start;
    }

    .store-store-form .sa-template-wrap .el-form-item .el-form-item__content {
        margin-left: 0 !important;
    }

    .store-store-form .sa-template-wrap .express {
        flex: unset !important;
        width: 110px;
    }
</style>
<div id="addEdit" class="store-store-form" v-cloak>
    <el-container class="panel-block">
        <el-main>
            <el-scrollbar height="100%">
                <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px">
                    <el-form-item label="商户LOGO" prop="image">
                        <sa-uploader v-model="form.model.image" fileType="image"></sa-uploader>
                    </el-form-item>
                    <el-form-item label="商户名称" prop="store_name">
                        <el-input class="sa-w-360" v-model="form.model.store_name" placeholder="请输入商户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="user_name">
                        <el-input class="sa-w-360" v-model="form.model.user_name" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input class="sa-w-360" v-model="form.model.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>

                    <el-form-item label="服务省市" prop="pcd">
                        <el-cascader ref="addressRef" v-model="form.model.pcd" :options="area.select" :props="{ label: 'name', value: 'id' }">
                        </el-cascader>
                    </el-form-item>

                    <el-form-item label="地址管理：">
                        <div class="sa-template-wrap">
                            <div class="header sa-flex">
                                <div class="key">门店地址</div>
                                <div class="key">门店名称</div>
                                <div class="oper">操作</div>
                            </div>
                            <draggable v-model="form.model.dian" :animation="300"
                                       handle=".sortable-drag" item-key="element">
                                <template #item="{ element, index }">
                                    <div class="item">
                                        <el-form-item class="key">
                                            <el-input placeholder="请输入" v-model="element.dian_address">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item class="key">
                                            <el-input placeholder="请输入" v-model="element.dian_name">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item class="oper">
                                            <el-popconfirm width="fit-content" confirm-button-text="确认"
                                                           cancel-button-text="取消" title="确认删除这条记录?"
                                                           @confirm="onDeleteDian(index)">
                                                <template #reference>
                                                    <el-button type="danger" link @click.stop>删除
                                                    </el-button>
                                                </template>
                                            </el-popconfirm>
                                            <i class="iconfont iconmove sortable-drag"></i>
                                        </el-form-item>
                                    </div>
                                </template>
                            </draggable>
                            <el-button class="add-params" type="primary" plain icon="Plus" @click="onAddDian">添加
                            </el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="状态" required>
                        <el-radio-group v-model="form.model.status">
                            <el-radio label="normal">正常</el-radio>
                            <el-radio label="hidden">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </el-main>
        <el-footer class="sa-footer--submit sa-flex sa-row-right">
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </el-footer>
    </el-container>
</div>